import 'package:flutter/material.dart';
import 'package:flutter_app/components/layout.dart';
import 'package:flutter_app/components/topStack.dart';
import 'package:flutter_app/generated/l10n.dart';
import 'package:flutter_app/utils/AppUtil.dart';

class DoubleListPage extends StatefulWidget {
  @override
  _DoubleListPageState createState() => _DoubleListPageState();
}

Widget TagContainer(String text) {
  return Container(
    padding: EdgeInsets.symmetric(vertical: 3.0, horizontal: 8.0),
    decoration: BoxDecoration(
        color: Colors.grey.withOpacity(0.1),
        borderRadius: BorderRadius.only(topRight: Radius.circular(6))),
    child: Text(
      text,
      style: TextStyle(color: Colors.black87, fontSize: 13),
    ),
  );
}

Widget GreyText(String content) {
  return Text(content, style: TextStyle(color: Colors.grey, fontSize: 13));
}

Widget OptionContainer(DoubleOption item, context) {
  return ColumnStart(children: [
    SizedBox(
      height: 0,
    ),
    //endLine 到期日
    TagContainer(S.of(context).endLine+'：${item.endDate}'),
    Wrap(
      children: item.data.map((opt) => ItemContainer(opt, context)).toList(),
    )
  ]);
}

Widget ItemContainer(dynamic item, context) {
  return Container(
    padding: EdgeInsets.symmetric(vertical: 20.0),
    decoration: BoxDecoration(
        border: Border(bottom: BorderSide(width: 1, color: Colors.grey[200]))),
    child: GestureDetector(
      onTap: () {
        Navigator.pushNamed(context, '/double/detail');
      },
      child: RowBetween(
        children: [
          ColumnStart(
            children: [
              Row(
                children: [
                  Text(
                    '87.6',
                    style: TextStyle(
                        fontSize: 24,
                        color: Colors.blueAccent[400],
                        fontFamily: 'PingFang',
                        fontWeight: FontWeight.w700),
                  ),
                  Text(
                    '%',
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.blueAccent[400],
                        fontFamily: 'PingFang',
                        fontWeight: FontWeight.w600),
                  )
                ],
              ),
              // 年化收益率
              GreyText(S.of(context).annualizaed),
            ],
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              color: Colors.transparent,
              child: ColumnStart(
                children: [
                  Text(
                    '\$' + AppUtil.formatNum(53000),
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontFamily: 'PingFang',
                        fontSize: 16),
                  ),
                  //挂钩价
                  GreyText(S.of(context).linked_price),
                ],
              ),
            ),
          ),
          ColumnStart(
            children: [
              Text(
                '1 ' + S.of(context).day,
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'PingFang',
                    fontSize: 15),
              ),
              //期限
              GreyText(S.of(context).s_tenor),
            ],
          )
        ],
      ),
    ),
  );
}

class DoubleOption {
  String endDate;
  List data;

  DoubleOption({this.endDate, this.data});
}

List<DoubleOption> doubleOptions = [
  DoubleOption(endDate: '2021-02-11', data: [1, 1, 1, 1, 1]),
  DoubleOption(endDate: '2021-02-12', data: [1, 1, 1, 1, 1]),
  DoubleOption(endDate: '2021-02-13', data: [1, 1, 1, 1, 1]),
];

List getListData(context) {
  return doubleOptions.map((item) => OptionContainer(item, context)).toList();
}

class _DoubleListPageState extends State<DoubleListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          brightness: Brightness.dark,
          backgroundColor: Colors.blueAccent[400],
          elevation: 0,
          actions: [
            TextButton(
                onPressed: () {},
                child: Row(
                  children: [
                    Text(
                      'BTC  ' + S.of(context).index,
                      style: TextStyle(color: Colors.white54, fontSize: 15),
                    ),
                    Text(
                      ' \$'+AppUtil.formatNum(46367.36,point: 2),
                      style: TextStyle(color: Colors.white, fontSize: 17),
                    ),
                    SizedBox(width: 15)
                  ],
                ))
          ],
        ),
        body: Column(
          children: [
            //  stack
            TopStack(
              children: [
                Image.asset('assets/images/ic_product_list_dual_ccy_usd.png',
                    width: 50),
                SizedBox(width: 15),
                Expanded(
                  child: ColumnStart(
                    children: [
                      ColumnStart(
                        children: [
                          Text(
                            S.of(context).dual_coin('BTC-U '),
                            style: TextStyle(fontSize: 18),
                          ),
                          SizedBox(
                            height: 8,
                          ),
                          Text(
                            '投入USDⓢ,赚取稳健高收益USDC或BTC',
                            style:
                                TextStyle(fontSize: 12, color: Colors.black54),
                          ),
                          SizedBox(
                            height: 8,
                          ),
                        ],
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(vertical: 10.0),
                        decoration: BoxDecoration(
                            border: Border(
                          top: BorderSide(
                            width: 1, //宽度
                            color: Colors.grey.withOpacity(0.2), //边框颜色
                          ),
                        )),
                        child: GestureDetector(
                          onTap: () =>
                              Navigator.pushNamed(context, '/double/record'),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(
                                child: Text(
                                  // 投资记录
                                  S.of(context).invest_record,
                                  style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500),
                                ),
                              ),
                              Icon(
                                Icons.arrow_forward_ios,
                                color: Colors.grey.withOpacity(0.5),
                                size: 14,
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
            Expanded(
              child: RefreshIndicator(
                onRefresh: () async {},
                child: SingleChildScrollView(
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 15.0),
                    child: ColumnStart(
                      children: [
                        Wrap(
                          children: getListData(context),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            )
          ],
        ));
  }
}
